new Vue({
    el:"#app",
    data:{
        topic:{
            title:"",
            topicMsg:"",
            content:"",
            outTradeNo:"",
            codeUrl:"",
            totalFee:"1",
            body:"1"
        },
        userType:"",      // 用户类型 0：普通用户 1：付费用户 2：管理员
        loginUserId:"0",
        username:"",
        headimg:"",
        user:{
            id:"",               //登录用户的id
            name:""              //用户的姓名
        }
    },
    methods:{
        verifyToken:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/consumer/token/verifyToken')
                .then(function (response) {
                    if (response.data.data == "TOKEN_EXPIRED") {
                        alert("token已失效, 请重新登录！");
                        // token失效, 需要重新登陆
                        window.location.href = "login.html";
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        // 生成支付二维码
        createNative:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //axios的post方式需要一个formData来传参
            var formData = new FormData();
            formData.append('totalFee', _this.topic.totalFee);
            formData.append('body', _this.topic.body);
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post('/consumer/pay/createNative', formData, config)
                .then(function (response) {
                    _this.topic.codeUrl = response.data.data.codeUrl;
                    _this.topic.outTradeNo = response.data.data.outTradeNo;
                    _this.topic.totalFee = response.data.data.totalFee;

                    var qrcode = new QRCode(document.getElementById("qrcode"), {
                        width : 400,
                        height : 400
                    });
                    // 生成二维码到页面
                    qrcode.makeCode(response.data.data.codeUrl);
                    _this.checkPaySuccess();
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        getLoginUserById:function () {
            var _this = this;
            axios.get('/consumer/user/getLoginUserById')
                .then(function (response) {
                    //把返回的user对象的id赋值给这里的id
                    if (response.data != null) {
                        _this.loginUserId = response.data.data.id;
                        _this.username = response.data.data.username;
                        _this.headimg = response.data.data.headimg;
                        _this.userType =  response.data.data.userType;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        // 检测是否支付成功, 定时器执行, 3S一次, 直至支付成功
        checkPaySuccess:function () {
            var _this = this;
            axios.get('/consumer/pay/queryOrder',  {
                params: {
                    outTradeNo: _this.topic.outTradeNo,
                }
            })
                .then(function (response) {
                    //把返回的user对象的id赋值给这里的id
                    if (response.data != null) {
                        if (response.data.data == "PAY_SUCCESS") {
                            alert("会员充值成功！");
                            window.location.href = "paySuccess.html";
                        } else {
                            // 定时器暂停3S, 再重新请求
                            setInterval(_this.checkPaySuccess(),10000);
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        setSelfUserId:function (userId) {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //axios的post方式需要一个formData来传参
            var formData = new FormData();
            formData.append('userId', userId);
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post('/consumer/user/setSelfUserId',formData,config)
                .then(function (response) {
                    if (userId == _this.loginUserId) {
                        // 如果id是登录的用户id的话就直接跳转到自己的页面, 否则跳转到其他人的页面
                        window.location.href = "self.html";
                    } else {
                        window.location.href = "other.html";
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        // 登出流程
        loginOut:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/consumer/token/loginOut')
                .then(function (response) {
                    if (response.data.code == 1) {
                        alert("账号已登出！");
                        // 刷新当前页面
                        window.location.reload();
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    },
    created:function () {

        //创建的时候先执行判断是否登录的方法
        this.getLoginUserById();

        // 创建的时候先校验token是否合法, 这里需要校验是否登录才能进行充值
        this.verifyToken();

        // 调用生成支付二维码方法
        this.createNative();

    }
});